<template>
    <div>
        <el-row>
            <el-col :span="4">
                <el-menu style="height: 100vh;" background-color="#545c64" active-text-color="#ffd04b" text-color="#fff"
                    router :default-active="defindex" :collapse="isCollapse" :unique-opened="true"
                    @open="handleOpen" @close="handleClose">
                    <h5 class="py-4 text-light-100 font-semibold titlefont">后台管理系统</h5>
                    <el-menu-item index="/home/index/index">
                        <el-icon>
                            <document />
                        </el-icon>
                        <template #title>首页</template>
                    </el-menu-item>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>七八商城</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/ranransc/goods">商品列表</el-menu-item>
                            <el-menu-item index="1-2">用户列表</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <IconMenu />
                            </el-icon>
                            <span>七八销售</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/employeeSales/employee">员工列表</el-menu-item>
                            <el-menu-item index="2-2">保险列表</el-menu-item>
                            <el-menu-item index="/home/employeeSales/goods">商品列表</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="3">
                        <el-icon>
                            <document />
                        </el-icon>
                        <template #title>系统管理</template>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <template #title>系统主题</template>
                    </el-menu-item>
                    

                </el-menu>
            </el-col>
            <el-col :span="20">
                <el-page-header class="p-4" :icon="Back" title="返回" @back="Goback">
                    <template #content>
                      <div class="flex items-center">
                        <el-avatar
                          :size="32"
                          class="mr-3"
                          :src="avatar"
                        />
                        <span class="text-large font-600 mr-3"> {{realname}} </span>
                      </div>
                    </template>
                    <template #extra>
                      <div class="flex items-center">
                        <el-button key="danger" type="danger" text bg @click="exit">退出</el-button>
                      </div>
                    </template>
                  </el-page-header>

                <div class="p-5" style="padding-top: 0;">
                    <router-view></router-view>
                </div>

            </el-col>
        </el-row>


        <el-dialog v-model="exitshow" width="20%" :before-close="handleClose">
            <span>确定要退出吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="exitshow = false">取消</el-button>
                    <el-button type="danger" @click="comfireexit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Menu,
    Back
} from '@element-plus/icons-vue'

const router = useRouter()
let realname = localStorage.getItem('realname')
let isCollapse = ref(false)
let exitshow = ref(false)
let defindex = ref(window.location.pathname)
let avatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
if(localStorage.getItem('avatar')){
    avatar.value = localStorage.getItem('avatar')
}

ElMessage.success('登录成功')
const handleOpen = (key, keyPath) => {
}
const handleClose = (key, keyPath) => {
}
//点击返回
const Goback = () => {
    if (window.location.pathname == '/home/index/index') {
        return false
    } else {
        router.back()
    }
}
//点击退出
const exit = () => {
    exitshow.value = true
}

//点击确定退出
const comfireexit = () => {
    localStorage.removeItem('token')
    router.push('/')
}


</script>


<style lang="less" scoped>
.titlefont {
    width: 100%;
    text-align: center;
    font-size: 48rpx;
}

.ml-2 {
    font-size: 24rpx !important;
}
</style>